<template>
    <el-container id="app">
        <el-header>
            <div class="header-container">
                <a href=""><img src="../assets/images/logo.png" class="logo"/></a>
                <el-menu :default-active="defaultActive" mode="horizontal" :router="true" class="module-nav"
                         background-color="#007cdc" text-color="#fff" active-text-color="#fff">
                    <el-menu-item index="dynamic-list">发现</el-menu-item>
                    <el-menu-item index="/">关注</el-menu-item>
                    <el-menu-item index="user-search-list">人脉</el-menu-item>
                </el-menu>
                <div>
                    <el-input placeholder="请输入内容" class="input-with-select" size="small" suffix-icon="el-icon-search">
                        <el-select v-model="select" slot="prepend" placeholder="请选择">
                            <el-option label="动态" value="1"></el-option>
                            <el-option label="人脉" value="2"></el-option>
                        </el-select>
                    </el-input>
                </div>
                <ul class="user-nav nav">
                    <li @click="openModule('login',{active:'login'})" v-if="!loginFlag"><a>登陆</a></li>
                    <li @click="openModule('login',{active:'register'})" v-if="!loginFlag"><a>注册</a></li>

                    <li @click="openModule('message-list')" v-if="loginFlag">
                        <el-badge :value="messageCount" :max="99" class="item" :hidden="messageCount <= 0">
                            <i class="el-icon-message module-icon"></i>
                        </el-badge>

                    </li>
                    <li style="padding: 0;" v-if="loginFlag">
                        <el-divider direction="vertical" style="padding: 0"></el-divider>
                    </li>
                    <li v-if="loginFlag" class="user-head">
                        <el-dropdown @command="selectCommand">
                            <div>
                                <el-avatar :size="40" :src="userInfo.headUrl"
                                           v-if="userInfo.headUrl  != null"></el-avatar>
                                <span v-else> {{userInfo.realName}}</span>
                                <i class="el-icon-caret-bottom  el-icon--right"></i>
                            </div>
                            <el-dropdown-menu slot="dropdown" class="primary-dropdown-menu">
                                <el-dropdown-item command="my-home" icon="el-icon-third-warehouse">我的主页
                                </el-dropdown-item>
                                <el-dropdown-item command="my-friend-list" icon="el-icon-third-Customermanagement">
                                    我的人脉
                                </el-dropdown-item>
                                <el-dropdown-item command="user-details" icon="el-icon-third-account">账号信息
                                </el-dropdown-item>
                                <el-dropdown-item command="account-setting" icon="el-icon-third-set">设置
                                </el-dropdown-item>
                                <el-dropdown-item command="exist" icon="el-icon-third-switch">退出</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>

                    </li>

                    <li>
                        <el-button size="mini" round icon="el-icon-edit" plain @click="openModule('add-dynamic')" v-if="loginFlag">发布
                        </el-button>
                    </li>
                </ul>
            </div>

        </el-header>
        <el-main>
            <keep-alive>
                <router-view v-if="$route.meta.keepAlive"></router-view>
            </keep-alive>
            <router-view v-if="!$route.meta.keepAlive"></router-view>

        </el-main>
        <el-footer>

        </el-footer>

    </el-container>
</template>

<script>
    import common from '@/api/common'

    export default {
        data: function () {
            return {
                messageCount: 0,
                loginFlag: false,//是否登陆标识
                userInfo: {},
                select: "1",
                search: "",
                defaultActive: ""
            }
        },
        methods: {
            /**
             * 打开模块
             */
            openModule(module, query) {
                this.$router.push({name: module, query: query})
            },
            selectCommand(command) {
                if (command == 'exist') {
                    this.$confirm('确定退出吗?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.$post("/user/logout").then(() =>{
                            sessionStorage.removeItem("token");
                            sessionStorage.removeItem("userInfo");
                            window.location.href = '#/login'
                        })
                    })
                } else {
                    this.openModule(command)
                }

            },
            getUserInfo() {
                common.getUserInfo().then((res) => {
                    this.loginFlag = true;
                    this.requestFlag = true;
                    this.userInfo = res;
                    this.getMessageCount();
                }).catch((err) => {
                    sessionStorage.removeItem("token");
                    this.loginFlag = false;
                })
            },
            getMessageCount() {
                let inter;
                let task = () => {
                    if (!this.loginFlag) {
                        clearInterval(inter);
                        return;
                    }
                    let thisMessageCount = null;
                    this.$post("/user/message/getCount").then((res) => {
                        if (thisMessageCount == null) {
                            thisMessageCount = res.data;
                        } else {
                            thisMessageCount = thisMessageCount + res.data;
                        }
                        this.messageCount = thisMessageCount;
                    }).catch(err => {
                        console.log(err)
                        clearInterval(inter);
                    })

                    this.$post("/dynamic/message/getCount").then((res) => {
                        if (thisMessageCount == null) {
                            thisMessageCount = res.data;
                        } else {
                            thisMessageCount = thisMessageCount + res.data;
                        }
                        this.messageCount = thisMessageCount;
                    }).catch(err => {
                        console.log(err)
                        clearInterval(inter);
                    })
                }
                task();
                inter = setInterval(() => {
                    task();
                }, 30000);
            }
        },
        /*生命周期*/
        /**
         * 页面切换
         */
        updated() {
            let name = this.$route.name;
            if (name == "home-index.vue") {
                this.defaultActive = "/";
            } else {
                this.defaultActive = name;
            }
        },
        mounted() {
           this.getUserInfo();
        }

    }
</script>

<style>


</style>
